<div ng-init="init();" class="kmi-layout-content SMT04-content" ng-class="[mode]">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="header-title" ng-bind="'SMT04.title' | translate"></div>
    </div>
    <div class="kmi-layout-main-content">
        <!-- 基本資料 data -->
        <div class="kmi-row-fields data">
            <!-- 使用者資料 data_user -->
            <div class="column-item left data_user">
                <img src="image/icons/person.png"></img> 
                <label ng-bind="user_name"></label>
            </div>
            <!-- 環境資料 data_environment -->
            <div class="column-item right data_environment">
                <label ng-bind="('home.env' | translate) + envInfo"></label>
            </div>
        </div>
        <!-- 主要流程 process -->
        <div class="kmi-tab-content" style="border-bottom:1px #cecece solid;">
            <div class="tab" ng-click="ChangeTab('M')" ng-class="{'is-select':mode == 'M'}">
                <label ng-bind="'SMT04.process_machine' | translate" ></label>
                <div class="kmi-can-click"></div>
            </div>
            <div class="tab" ng-click="ChangeTab('T')" ng-class="{'is-select':mode == 'T'}">
                <label ng-bind="'SMT04.process_mfu' | translate" ></label>
                <div class="kmi-can-click"></div>
            </div>
            <div class="tab" ng-click="ChangeTab('F')" ng-class="{'is-select':mode == 'F'}">
                <label ng-bind="'SMT04.process_feeder' | translate" ></label>
                <div class="kmi-can-click"></div>
            </div>
        </div>
        <!-- 搜尋掃描欄 qr-code -->
        <div class="kmi-row-fields barcode_content qr-code" id="input_barcode">
            <img src="image/icons/search.png"></img> 
            <!-- <input class="qr-code_input" mdl-barcode="input_barcode(barcode)"/> -->
            <input class="barcode_input value input_plot" readonly="readonly"
                ng-keypress="input_PDA_barcode($event);" ng-model="barcode" hidekeyboard="true" />
            <div class="qr-code_icon" ng-click="QRCodeScanner();">
                <img src="image/icons/QRCode.png">
            </div>
        </div>
        <!-- 僅下線 (true) or 下線並下料 (false) -->
        <div class="kmi-row-fields init-none ng_trolley ng_feeder" style="border-bottom: 1px #cecece solid; position: relative;">
            <div class="column-item" style="justify-content: space-around;">
                <div class="is-offline-btn" ng-click="is_offline = true">
                    <i class="material-icons" ng-show="is_offline">&#xE834;</i>
                    <i class="material-icons" ng-show="!is_offline">&#xE835;</i>
                    <label class="label" ng-bind="'SMT04.offline_only' | translate"></label>
                    <div class="kmi-can-click"></div>
                </div>
                <div class="is-offline-btn" ng-click="is_offline = false">
                    <i class="material-icons" ng-show="!is_offline">&#xE834;</i>
                    <i class="material-icons" ng-show="is_offline">&#xE835;</i>
                    <label class="label" ng-bind="'SMT04.offline_and_feeding' | translate"></label>
                    <div class="kmi-can-click"></div>
                </div>
            </div>
        </div>
        <!-- 主要內容 SMT04_main -->
        <div class="SMT04_main">
            <div class="kmi-row-fields main_fields">
                <div class="column-item">
                    <!-- 設備編號 machine_no -->
                    <label class="label main_item ng_machine" ng-bind="'SMT04.list1.machine_no' | translate"></label>
                    <label class="value ng_machine" ng-bind="machine_no"></label>
                    <!-- 台車編號 mfu_no -->
                    <label class="label main_item init-none ng_trolley" ng-bind="'SMT04.list2.mfu_no' | translate"></label>
                    <label class="value init-none ng_trolley" ng-bind="mfu_no"></label>
                    <!-- Feeder編號 feeder_no  -->
                    <label class="label main_item init-none ng_feeder" ng-bind="'SMT04.list3.feeder_no' | translate"></label>
                    <label class="value init-none ng_feeder" ng-bind="feeder_no"></label>
                </div>
            </div>
            <div class="kmi-row-fields main_fields">
                <div class="column-item">
                    <!-- (台車)累計使用次數  mfu_acc_count -->
                    <label class="label main_item init-none ng_trolley" ng-bind="'SMT04.list2.cumulative_usage_count' | translate"></label>
                    <label class="value init-none ng_trolley" ng-bind="mfu_acc_count"></label>
                    <!-- (Feeder)累計使用次數  feeder_acc_count -->
                    <label class="label main_item init-none ng_feeder" ng-bind="'SMT04.list3.cumulative_usage_count' | translate"></label>
                    <label class="value init-none ng_feeder" ng-bind="feeder_acc_count"></label>
                </div>
            </div>
            <div class="kmi-row-fields main_fields">
                <div class="column-item">
                    <!-- (台車)使用次數上限  mfu_usage_count -->
                    <label class="label main_item init-none ng_trolley" ng-bind="'SMT04.list2.usage_count_limit' | translate"></label>
                    <label class="value init-none ng_trolley" ng-bind="mfu_usage_count"></label>
                    <!-- (Feeder)使用次數上限  feeder_usage_count -->
                    <label class="label main_item init-none ng_feeder" ng-bind="'SMT04.list3.usage_count_limit' | translate"></label>
                    <label class="value init-none ng_feeder" ng-bind="feeder_usage_count"></label>
                </div>
            </div>
            <div class="kmi-row-fields main_fields">
                <div class="column-item">
                    <!-- (台車)最後保養日  mfu_last_maintain_date -->
                    <label class="label main_item init-none ng_trolley" ng-bind="'SMT04.list2.last_maintain_date' | translate"></label>
                    <label class="value init-none ng_trolley" ng-bind="mfu_last_maintain_date"></label>
                    <!-- (Feeder)最後保養日  feeder_last_maintain_date -->
                    <label class="label main_item init-none ng_feeder" ng-bind="'SMT04.list3.last_maintain_date' | translate"></label>
                    <label class="value init-none ng_feeder" ng-bind="feeder_last_maintain_date"></label>
                </div>
            </div>
        </div>
        <!-- 關閉按鈕 & 下料明細按鈕 & 保養按鈕 -->
        <div class="kmi-mobile__btn-content" style="justify-content: space-around; display: flex;">
            <button class="kmi-button__mobile" ng-click="back();">
                <label ng-bind="'SMT04.close' | translate"></label>
                <div class="kmi-can-click"></div>
            </button>
            <!-- <button class="kmi-button__mobile" ng-click="loadStationNo();">
                <label ng-bind="'SMT04.cutting_details' | translate"></label>
                <div class="kmi-can-click"></div>
            </button> -->
            <button class="kmi-button__mobile init-none ng_trolley ng_feeder">
                <label ng-bind="'SMT04.maintain' | translate"></label>
                <div class="kmi-can-click"></div>
            </button>
        </div>
    </div>
</div>
